{% extends 'base.html' %}

{% block title %}
    博客详情
{% endblock %}

{% block header %}
    <link rel="stylesheet" href="{% static 'highlight/styles/default.min.css' %}">
    <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}

{% block main %}
    <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="display: flex">
            <div style="font-size: 30px;margin-right: 14px;">{{ blog.title }}</div>
            <div style="color: #a8a9ab;margin-top: 18px"><a href="#">{{ blog.author }}</a>  &nbsp;于{{ blog.pub_time|date:'Y年m月d日 H:i:s' }}发布</div>
        </div>
        <div>
            <img src="{% static 'image/头像.jpg' %}" alt="" height=50px class="rounded-circle">
        </div>
    </div>
    <hr>
    <div style="font-family: 'Microsoft YaHei',serif;font-size: 18px">{{ blog.content|safe }}</div>
    <hr>
    <div>
        <h3 class="my-3">评论({{ blog.comments.all|length }})</h3>
        <div class="mb-4">
            <form action="{% url 'blog:pub_comment' %}" method="post" style="display: flex">
                {% csrf_token %}
                <input type="hidden" name="blog_id" value="{{ blog.id }}">
                <label style="flex: 1;margin-right: 10px;">
                    <input type="text" placeholder="请输入评论" class="form-control" name="content">
                </label>
                <input type="submit" class="btn btn-primary" value="发送评论">
            </form>
        </div>
    </div>
    <div>
        <ul class="list-group list-group-flush">
            {% for comment in blog.comments.all %}
                <li class="list-group-item">
                    <div style="display: flex;justify-content: space-between;align-items: center">
                        <div>
                            <img src="{% static 'image/头像.jpg' %}" alt="" height=40px class="rounded-circle">
                            <span style="margin-left: 10px" class="text-secondary">用户：<a href="#">{{ comment.author.username }}</a></span>
                        </div>
                        <div style="color: #a8a9ab;font-size: 14px">评论时间：{{ comment.pub_time|date:'Y年m月d日 H:i:s' }}</div>
                    </div>
                    <p style="color:#656668;margin-top: 10px;text-indent: 2em;">{{ comment.content }}</p>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block footer %}
    <script>
        hljs.highlightAll();
        let preElements = document.querySelectorAll('pre');
        preElements.forEach(function (pre) {
            pre.style.borderRadius = '5px';
        });
    </script>
{% endblock %}